<template>
  <div class="footer">
    <div class="content">
      <div class="contact">
        <h3>联系我</h3>
        <p>邮箱：1284801439@qq.com</p>
        <p>电话：18360803125</p>
      </div>

      <div class="public">
        <h3>关注公众号</h3>
        <el-image :src="require('../assets/taoqimao.jpg')" lazy fit="cover" />
      </div>

      <div class="qq">
        <h3>扫码加微信</h3>
        <el-image :src="require('../assets/wechat.jpg')" lazy fit="cover" />
      </div>

      <div class="statistics">
        <h3>统计信息</h3>
        <p>
          文章总数：<span>{{ statisticsData.blogTotal }} </span> 篇
        </p>
        <p>
          访问总数：<span>{{ statisticsData.blogViewTotal }}</span> 次
        </p>
        <p>
          评论总数：<span>{{ statisticsData.blogCommentTotal }}</span> 条
        </p>
        <p>
          留言总数：<span>{{ statisticsData.blogMessageTotal }}</span> 条
        </p>
      </div>
    </div>
    <div class="filings"><a href="https://beian.miit.gov.cn" target="_blank">苏ICP备2023013117号-1</a></div>
  </div>
</template>

<script>
import indexApi from '@/api/home'
export default {
  name: 'FooterView',
  data() {
    return {
      statisticsData: {}
    }
  },
  created() {
    this.getStatisticsData()
  },
  methods: {
    getStatisticsData() {
      indexApi.getStatistics().then(res => {
        this.statisticsData = res.data.data
      })
    }
  }
}
</script>

<style lang="less" scoped>
.footer {
  width: 100%;
  height: auto;
  padding: 20px 10%;
  box-sizing: border-box;
  background-color: rgba(0, 0, 0, 0.8);

  .content {
    height: 100%;
    width: 80%;
    margin: 0 auto;
    padding: 10px 0;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    flex-flow: row nowrap;
    align-items: center;
    border-bottom: 1px solid #515151;

    .contact {
      height: 100%;
      width: 25%;
      padding: 30px 0;
      box-sizing: border-box;
      color: #fff;
      text-align: center;
      border-right: 1px solid #515151;

      h3 {
        margin: 20px 0;
      }
      p {
        margin: 5px 0;
      }
    }
    .public {
      height: 100%;
      width: 25%;
      color: #fff;
      text-align: center;
      border-right: 1px solid #515151;

      h3 {
        margin: 10px 0;
      }

      .el-image {
        width: 120px;
        height: 120px;
        border-radius: 5px;
        margin: 5px 0;
        vertical-align: middle;
        max-width: 100%;
      }
    }
    .qq {
      height: 100%;
      width: 25%;
      color: #fff;
      text-align: center;
      border-right: 1px solid #515151;

      h3 {
        margin: 10px 0;
      }
      .el-image {
        width: 120px;
        height: 120px;
        border-radius: 5px;
        margin: 5px 0;
        vertical-align: middle;
        max-width: 100%;
        background-color: transparent;
        object-fit: cover;
      }
    }
    .statistics {
      height: 100%;
      width: 25%;
      padding: 15px 0;
      box-sizing: border-box;
      color: #fff;
      text-align: center;

      h3 {
        margin: 20px 0;
      }
      p {
        margin: 5px 0;

        span {
          font-weight: bold;
          color: #f2711c;
        }
      }
    }
  }

  .filings {
    width: 80%;
    margin: 0 auto;
    margin-top: 20px;
    text-align: center;

    a {
      color: #519ff0;
    }
  }
}
</style>
